<template>
  <div class="song-sheet-list" ref="songSheetDiv" @mousewheel="roll">
    <SongSheet v-for="s in songSheetList" :key="s.id"
               :songSheet="s"
               class="song-sheet"
    ></SongSheet>
  </div>
</template>

<script>
import SongSheet from "@/components/Sidebar/SongSheetList/SongSheet";
import {getCurrentInstance, onMounted, ref} from "vue";
import {useStore} from "vuex";
import modal from "@/customize/modal";

export default {
  name: "SongSheetList",
  components: {SongSheet},
  description: {
    // 歌单列表
  },
  setup() {
    const store = useStore();
    const modal = getCurrentInstance().appContext.config.globalProperties.$modal;
    const songSheetDiv = ref();
    // let songSheetList = ref([]);
    let songSheetList = store.state.kugouNet.songSheetList;

    let timer = true; // 使用定时器实现

    function roll() {
      if (songSheetDiv.value) {
        let scrollTop = songSheetDiv.value.scrollTop;
        let clientHeight = songSheetDiv.value.clientHeight;
        let scrollHeight = songSheetDiv.value.scrollHeight;
        if (scrollTop + clientHeight >= scrollHeight) {
          // 节流
          if (timer) {
            timer = false;
            modal.onModal();
            store.state.kugouNet.page++;
            store.dispatch("kugouNet/getSongSheetListNetStore", {type: "songSheet", page: store.state.kugouNet.page});
            setTimeout(function () {
              timer = true;
            }, 1500);
          }


        }
      }
    }

    function getSongSheetList() {
      store.commit("kugouNet/SONG_SHEET_LIST_EMPTY");
      store.dispatch("kugouNet/getSongSheetListNetStore", {type: "songSheet", page: 1});
    }

    onMounted(() => {
      songSheetDiv.value.addEventListener('scroll', roll);
      getSongSheetList();
    })

    return {
      songSheetDiv,
      roll,
      songSheetList,
    }
  }
}
</script>

<style scoped lang="less">

@import url("@/assets/less/1.less");

.song-sheet-list {
  width: 950px;
  height: 800px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: center;
  overflow-x: hidden; /*x轴禁止滚动*/
  overflow-y: scroll; /*y轴滚动*/

  /* 定义滚动条样式 */

  &::-webkit-scrollbar {
    //display: none;
    width: 10px; //定义滚动条宽度
    height: 10px; //定义滚动条高度
    /*width: 20px;*/
    border-radius: 10px; //定义滚动条圆角
    background-color: rgba(240, 240, 240, 0.1); //定义滚动条颜色
  }

  /*定义滚动条轨道 内阴影+圆角*/

  &::-webkit-scrollbar-track {
    border-radius: 10px;
    /*滚动条里面轨道*/
    background: @bc;
  }

  /*&::-webkit-scrollbar-track {
    display: none;
    box-shadow: inset 0 0 0px rgba(240, 240, 240, .5); //定义轨道阴影
    border-radius: 10px; //定义轨道圆角
    background-color: rgba(4, 56, 114, .5); //定义轨道颜色
  }*/

  /*定义滑块 内阴影+圆角*/

  &::-webkit-scrollbar-thumb {
    border-radius: 10px; //定义滑块圆角
    box-shadow: inset 0 0 0 rgba(240, 240, 240, .5); //定义滑块阴影
    background-color: @fc //定义滑块颜色
  }

  .song-sheet {
    margin-right: 25px;
    margin-bottom: 15px;
  }
}
</style>
